<template>
  <div class="upload-cert-imgOne">
    <el-upload
        class="avatar-uploader"
        :action="uploadAction"
        :show-file-list="false"
        :on-success="handleAvatarSuccess"
        :before-upload="beforeAvatarUpload"
        accept=".png,.jpg"
        :on-change="uploadFile"
    >
      <el-image
          :src="imgUrl"
          v-if="imgUrl"
          class="avatar"
          style="width: 120px; height: auto"
          ref="imageRef"
          show-progress
          fit="cover"
      />
      <div class="img-center" v-else>
        <img src="@/assets/images/img_add.png" />
        <div class="click-upload">点击上传</div>
      </div>
    </el-upload>
    <el-image-viewer
        v-if="showPreview"
        :url-list="previewList"
        @close="showPreview = false"
    />
  </div>
  <div style="margin-right:50px">
    <p><ElButton @click="deleteImage" :disabled="!isDisabled">删 除</ElButton></p>
    <p><ElButton @click="showPreview = true" :disabled="!isDisabled">查 看</ElButton></p>
  </div>
</template>

<script lang="ts" setup>
import { defineProps, defineEmits, computed } from "vue";
import { ElMessage } from "element-plus";

const props = defineProps({
  imgThumbnail: {
    type: String,
    default: "",
  },
  imgFileId: {
    type: String,
    default: "",
  },
  title: {
    type: String,
    default: "",
  },

});

const uploadAction = ref(
    import.meta.env.PROD ? `${import.meta.env.VITE_SERVER_ACCOUNT}/api/v1/business/biz/dp/product/geFileUploadIconId` : '/api/v1/business/biz/dp/product/geFileUploadIconId '
);

const showPreview = ref(false);
let previewList = ref([]);
const isDisabled = ref(false);
let imgThumbnail = ref();


const emit = defineEmits(["update:imgThumbnail", "update:imgFileId"]);
let imgUrl: any = computed({
  get() {
    imgThumbnail.value = props.imgThumbnail;
    return props.imgThumbnail;
  },
  set(val: any) {
    emit("update:imgThumbnail", val);
  },
});

let fileId: any = computed({
  get() {
    return props.imgFileId;
  },
  set(val: any) {
    emit("update:imgFileId", val);
  },
});

const uploadFile = async (uploadFile: any) => {
  let imgBase64: any = await MyModule.utile.imageFileToBase64(uploadFile.raw);
  if (imgBase64) {
    isDisabled.value = true
  }
  imgUrl.value = imgBase64;
  previewList.value = imgBase64.split(' ');
};

// 上传成功
function handleAvatarSuccess(res: any) {
  if (res.code === 200) {
    fileId.value = res.data;
  }
}

// 上传之前
function beforeAvatarUpload(rawFile: any) {
  if (rawFile.size / 1024 / 1024 > 4) {
    ElMessage.error("图片大小不能超过4MB");
    return false;
  }
  return true;
}

// 删除清空图片信息
const deleteImage = () => {
  if (props.imgThumbnail === '') {
    ElMessage.error("没有可删除的图片");
  } else {
    imgUrl.value = '';
    isDisabled.value = false
  }
}

</script>

<style scoped lang="scss">
.avatar-uploader {
  background: #f6f6f6;
  width: 120px;
  height: 120px;
  border: 1px solid rgba(0, 0, 0, 0.1);
  margin-bottom: 15px;
}
:deep(.avatar-uploader .el-upload) {
  width: 120px;
  height: 120px;
  cursor: pointer;
  position: relative;
  overflow: hidden;
  transition: var(--el-transition-duration-fast);
}
.img-center {
  line-height: 0;
  width: 100%;
  text-align: center;
}
.click-upload {
  margin-top: 10px;
  line-height: 20px;
  font-family: PingFang SC, PingFang SC;
  font-weight: 400;
  font-size: 12px;
  color: rgba(0, 0, 0, 0.4);
  font-style: normal;
  text-transform: none;
}
.upload-title {
  margin-bottom: 4px;
  display: inline-block;
  font-family: PingFang SC, PingFang SC;
  font-weight: 400;
  font-size: 14px;
  text-align: center;
  font-style: normal;
  text-transform: none;
}
.upload-cert-imgOne{
  margin-right: 20px;
}
</style>
